import QtQuick 1.1
import com.meego 1.0

Page {
        id: mainPage
        tools: commonTools

        Flickable {
                anchors.fill: parent
                contentHeight: parent.height*2
                id: flickable1

                Item {
                        width: 200; height: 250
                        Component {
                                id: itemDelegate
                                Row {
                                        spacing:5
                                        Rectangle {
                                                anchors.margins: 5
                                                height: 50
                                                width: 50
                                                color: "red"
                                                Rectangle {
                                                        anchors.fill: parent
                                                        anchors.topMargin: 5
                                                        anchors.bottomMargin: 5
                                                        color:"black"
                                                }
                                                MouseArea {
                                                        anchors.fill: parent
                                                        onClicked: { parent.color = 'green' }
                                                }
                                        }
                                        Text {
                                                font.pointSize: 18
                                                text: "I am item number: " + index
                                                MouseArea {
                                                        anchors.fill: parent
                                                        onClicked: {
                                                                if (mouse.button==Qt.RightButton) {
                                                                        parent.color = 'yellow'
                                                                } else {
                                                                        parent.color = 'yellow'
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }

                        ListView {
                                anchors.fill: parent
                                model: 5
                                delegate: itemDelegate
                        }
                }
                Label {
                        id: label
                        anchors.centerIn: parent
                        text: qsTr("Hello world!")
                        visible: false
                }
                TextInput {
                        anchors.bottom : button1.top
                        font.pointSize: 18
                        width:parent.width
                        height:50
                        color: blue
                }
                Button{
                        id: button1
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: label.bottom
                        anchors.topMargin: 10
                        text: qsTr("Click here!")
                        onClicked: label.visible=true
                }
                Button{
                        id: button2
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: button1.bottom
                        anchors.topMargin: 10
                        text: qsTr("hide label!")
                        onClicked: label.visible=false
                }
                TextInput {
                        id: textInput
                        anchors {
                                left: parent.left
                                leftMargin: 8
                                right: parent.right
                                rightMargin: 8
                                top: button2.bottom
                                topMargin: 10
                        }
                        focus: true
                        selectByMouse: true
                }
        }
}
